<template>
  <div>
    <!-- 头部导航栏 246810-->
    <navbar title="登陆/注册" icon="cross" />

    <!-- 登陆表单区域 -->
    <van-form>
      <van-field
        v-model="user.mobile"
        left-icon="manager"
        name="电话号"
        placeholder="电话号"
        :rules="[{ required: true, message: '请填写电话号' }]"
      />
      <van-field
        v-model="user.code"
        left-icon="lock"
        name="验证码"
        placeholder="验证码"
        :rules="[{ required: true, message: '请填写验证码' }]"
      >
        <template #button>
          <van-count-down :time="time" v-show="a==true" @finish="finish" />
          <van-button size="small" type="primary" @click="k">发送验证码</van-button>
        </template>
      </van-field>
      <div style="margin: 16px">
        <van-button block type="info" native-type="submit" @click="dl">登陆</van-button>
      </div>
    </van-form>
    <!-- 登陆表单区域 -->
  </div>
</template>

<script>
import navbar from "../common/navbar";
export default {
  name: "login",
  components: {
    navbar
  },
  data() {
    return {
      time: 1000 * 10,
      a: false,
      user: { mobile: "", code: "" }
    };
  },
  methods: {
    k() {
      this.a = true;

      if (this.user.mobile == "") {
        return false;
      }
      var phone_pertten = /^1[34578]\d{9}$/;
      if (!phone_pertten.test(this.user.mobile)) {
        console.log("手机校验尚未通过");
        return false;
      } else {
        console.log("手机校验通过");
      }
      this.axios.get("app/v1_0/sms/codes/" + this.user.mobile).then(res => {
        console.log(res);
      });
    },
    finish() {
      this.a = false;
    },
    dl() {
      if (this.user.mobile == "") {
        console.log("手机号不能为空");
        return false;
      }

      if (this.user.code == "") {
        console.log("验证码不能为空");
        return false;
      }

      var phone_pertten = /^1[34578]\d{9}$/;
      var code_pertten = /^\d{6}$/;
      if (!phone_pertten.test(this.user.mobile)) {
        console.log("手机校验尚未通过");
        return false;
      } else {
        console.log("手机校验通过");
      }

      if (!code_pertten.test(this.user.code)) {
        console.log("验证吗校验尚未通过");
        return false;
      } else {
        console.log("验证吗校验通过");
      }

      this.axios.post("app/v1_0/authorizations", this.user).then(res => {
        console.log(res);
        this.$store.commit("to", res.data.data.token);
        alert("登录成功");
        this.$router.push("/sy");
      });
    }
  }
};
</script>

<style scoped>
</style>